[ElementTiming] Cleanup window.location.href usage in tests This CL removes window.location.href usage in element-timing tests and uses window.location.origin instead, which makes the pathname computation cleaner. It also adds t.step_func where it is missing. Change-Id: Iabaac33eb65f9ed24f68e7fa583c8de05d1264c5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1872762 Reviewed-by: Tom McKee <tommckee@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#707954} diff --git a/element-timing/background-image-multiple-elements.html b/element-timing/background-image-multiple-elements.html index 084bb9c..44755d4 100644 --- a/element-timing/background-image-multiple-elements.html +++ b/element-timing/background-image-multiple-elements.html
@@ -31,9 +31,7 @@ let observedDiv1 = false; let observedDiv2Img = false; let observedDiv2Txt = false; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; const observer = new PerformanceObserver( t.step_func(function(entryList) { entryList.getEntries().forEach(entry => { diff --git a/element-timing/background-image-stretched.html b/element-timing/background-image-stretched.html index 930b4ce..0cd5633 100644 --- a/element-timing/background-image-stretched.html +++ b/element-timing/background-image-stretched.html
@@ -25,9 +25,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; checkElement(entry, pathname, 'my_div', 'target', beforeRender, document.getElementById('target')); // The background image extends to occupy to full size of the div. diff --git a/element-timing/buffer-before-onload.html b/element-timing/buffer-before-onload.html index 68eeeef..d675c75 100644 --- a/element-timing/buffer-before-onload.html +++ b/element-timing/buffer-before-onload.html
@@ -25,19 +25,17 @@ // this PerformanceObserver should be notified about the previously // buffered element entry - new PerformanceObserver(function (entryList, observer) { + new PerformanceObserver(t.step_func((entryList, observer) => { assert_equals(entryList.getEntries().length, 1); - entryList.getEntries().forEach(function(entry) { + entryList.getEntries().forEach(entry => { assert_equals(entry.entryType, "element"); - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square20.jpg'; + const pathname = window.location.origin + '/element-timing/resources/square20.jpg'; checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img); checkNaturalSize(entry, 20, 20); observer.disconnect(); t.done(); }); - }).observe({ + })).observe({ type: "element", buffered: true }); diff --git a/element-timing/disconnect-image.html b/element-timing/disconnect-image.html index 82e7461..fa42397 100644 --- a/element-timing/disconnect-image.html +++ b/element-timing/disconnect-image.html
@@ -16,9 +16,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; // This method will check that entry.element is |img|. checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img); diff --git a/element-timing/image-carousel.html b/element-timing/image-carousel.html index 39d9f01..dc5d8e8 100644 --- a/element-timing/image-carousel.html +++ b/element-timing/image-carousel.html
@@ -32,12 +32,9 @@ const beforeRenderTimes = []; let entry_count = 0; const entry_count_per_element = [0, 0]; - const index = window.location.href.lastIndexOf('/'); - const pathname0 = window.location.href.substring(0, index) + - '/resources/circle.svg'; - const pathname1 = window.location.href.substring(0, index) + - '/resources/square100.png'; - const observer = new PerformanceObserver(list => { + const pathname0 = window.location.origin + '/element-timing/resources/circle.svg'; + const pathname1 = window.location.origin + '/element-timing/resources/square100.png'; + const observer = new PerformanceObserver(t.step_func(list => { list.getEntries().forEach(entry => { if (entry_count % 2 == 0) { checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count], @@ -61,7 +58,7 @@ t.done(); } }) - }); + })); observer.observe({entryTypes: ['element']}); let slideIndex = 0; showCarousel(); diff --git a/element-timing/image-clipped-svg.html b/element-timing/image-clipped-svg.html index 1e9971c..15c78a4 100644 --- a/element-timing/image-clipped-svg.html +++ b/element-timing/image-clipped-svg.html
@@ -14,9 +14,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/circle.svg'; + const pathname = window.location.origin + '/element-timing/resources/circle.svg'; checkElement(entry, pathname, 'my_svg', 'SVG', beforeRender, document.getElementById('SVG')); // Image size is 200x200 but SVG size is 100x100 so it is clipped. diff --git a/element-timing/image-not-fully-visible.html b/element-timing/image-not-fully-visible.html index 105bb55..ece7770 100644 --- a/element-timing/image-not-fully-visible.html +++ b/element-timing/image-not-fully-visible.html
@@ -21,9 +21,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square20.png'; + const pathname = window.location.origin + '/element-timing/resources/square20.png'; checkElement(entry, pathname, 'not_fully_visible', '', beforeRender, img); // Image will not be fully visible. It should start from the top left part // of the document, excluding the margin, and then overflow. diff --git a/element-timing/image-with-css-scale.html b/element-timing/image-with-css-scale.html index 5c15daa..2dbbc06 100644 --- a/element-timing/image-with-css-scale.html +++ b/element-timing/image-with-css-scale.html
@@ -28,9 +28,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index - 14) + - 'images/black-rectangle.png'; + const pathname = window.location.origin + '/images/black-rectangle.png'; checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender, document.getElementById('rect_id')); checkRect(entry, [0, 200, 25, 125]); diff --git a/element-timing/image-with-rotation.html b/element-timing/image-with-rotation.html index c545bec..fcffe4a 100644 --- a/element-timing/image-with-rotation.html +++ b/element-timing/image-with-rotation.html
@@ -28,9 +28,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index - 14) + - 'images/black-rectangle.png'; + const pathname = window.location.origin + '/images/black-rectangle.png'; checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender, document.getElementById('rect_id')); checkNaturalSize(entry, 100, 50); diff --git a/element-timing/images-repeated-resource.html b/element-timing/images-repeated-resource.html index a6ad7ac..e3fe9b9 100644 --- a/element-timing/images-repeated-resource.html +++ b/element-timing/images-repeated-resource.html
@@ -19,9 +19,6 @@ let renderTime2; let img; let img2; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; async_test(function (t) { if (!window.PerformanceElementTiming) { assert_unreached("PerformanceElementTiming is not implemented"); @@ -30,6 +27,7 @@ t.step_func(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; // Easier to check the |element| attribute here since element ID is the same for both images. checkElement(entry, pathname, entry.identifier, 'image_id', beforeRender, null); checkNaturalSize(entry, 100, 100); diff --git a/element-timing/multiple-background-images.html b/element-timing/multiple-background-images.html index 626287b..b29e66c 100644 --- a/element-timing/multiple-background-images.html +++ b/element-timing/multiple-background-images.html
@@ -24,8 +24,7 @@ let numObservedElements = 0; let observedCircle = false; let observedSquare = false; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + '/resources/'; + const pathPrefix = window.location.origin + '/element-timing/resources/'; let div = document.getElementById('target'); const observer = new PerformanceObserver( t.step_func(entryList => { @@ -33,13 +32,13 @@ numObservedElements++; if (entry.url.endsWith('square100.png')) { observedSquare = true; - checkElement(entry, pathname + 'square100.png', 'multi', 'target', beforeRender, div); + checkElement(entry, pathPrefix + 'square100.png', 'multi', 'target', beforeRender, div); checkRect(entry, [0, 200, 0, 200]); checkNaturalSize(entry, 100, 100); } else if (entry.url.endsWith('circle.svg')) { observedCircle = true; - checkElement(entry, pathname + 'circle.svg', 'multi', 'target', beforeRender, div); + checkElement(entry, pathPrefix + 'circle.svg', 'multi', 'target', beforeRender, div); checkRect(entry, [0, 200, 0, 200]); checkNaturalSize(entry, 200, 200); } diff --git a/element-timing/observe-background-image.html b/element-timing/observe-background-image.html index c642264..afc6b5b 100644 --- a/element-timing/observe-background-image.html +++ b/element-timing/observe-background-image.html
@@ -25,9 +25,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index - 14) + - 'images/black-rectangle.png'; + const pathname = window.location.origin + '/images/black-rectangle.png'; checkElement(entry, pathname, 'my_div', 'target', beforeRender, document.getElementById('target')); checkRect(entry, [0, 100, 0, 50]); diff --git a/element-timing/observe-elementtiming.html b/element-timing/observe-elementtiming.html index 0c67130..164cc4f 100644 --- a/element-timing/observe-elementtiming.html +++ b/element-timing/observe-elementtiming.html
@@ -21,9 +21,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname = window.location.origin + '/element-timing/resources/square100.png'; checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img); // Assume viewport has size at least 100, so the element is fully visible. checkRect(entry, [0, 100, 0, 100]); diff --git a/element-timing/observe-multiple-images.html b/element-timing/observe-multiple-images.html index 8a5fa0b..6b5c5d9 100644 --- a/element-timing/observe-multiple-images.html +++ b/element-timing/observe-multiple-images.html
@@ -25,7 +25,6 @@ if (!window.PerformanceElementTiming) { assert_unreached("PerformanceElementTiming is not implemented"); } - const index = window.location.href.lastIndexOf('/'); const observer = new PerformanceObserver( t.step_func(function(entryList) { entryList.getEntries().forEach( entry => { @@ -35,8 +34,7 @@ t.done(); } image1Observed = 1; - const pathname1 = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname1 = window.location.origin + '/element-timing/resources/square100.png'; // The images do not contain ID, so expect an empty ID. checkElement(entry, pathname1, 'image1', 'img1', beforeRender, document.getElementById('img1')); @@ -61,8 +59,7 @@ t.done(); } image2Observed = 1; - const pathname2 = window.location.href.substring(0, index) + - '/resources/square20.png'; + const pathname2 = window.location.origin + '/element-timing/resources/square20.png'; checkElement(entry, pathname2, 'image2', 'img2', beforeRender, document.getElementById('img2')); // This image should be below image 1, and should respect the margin. @@ -75,8 +72,7 @@ t.done(); } image3Observed = 1; - const pathname3 = window.location.href.substring(0, index) + - '/resources/circle.svg'; + const pathname3 = window.location.origin + '/element-timing/resources/circle.svg'; checkElement(entry, pathname3, 'image3', 'img3', beforeRender, document.getElementById('img3')); // This image is just to the right of image2. diff --git a/element-timing/observe-svg-image.html b/element-timing/observe-svg-image.html index 29fec39..8a0f61d 100644 --- a/element-timing/observe-svg-image.html +++ b/element-timing/observe-svg-image.html
@@ -14,9 +14,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/circle.svg'; + const pathname = window.location.origin + '/element-timing/resources/circle.svg'; checkElement(entry, pathname, 'my_svg', 'svg_id', beforeRender, document.getElementById('svg_id')); // Assume viewport has size at least 200, so the element is fully visible. diff --git a/element-timing/observe-video-poster.html b/element-timing/observe-video-poster.html index 9f82478..a634837 100644 --- a/element-timing/observe-video-poster.html +++ b/element-timing/observe-video-poster.html
@@ -14,9 +14,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/circle.svg'; + const pathname = window.location.origin + '/element-timing/resources/circle.svg'; checkElement(entry, pathname, 'my_poster', 'the_poster', beforeRender, document.getElementById('the_poster')); // Assume viewport has size at least 200, so the element is fully visible. diff --git a/element-timing/progressively-loaded-image.html b/element-timing/progressively-loaded-image.html index a55c589..f156e1a 100644 --- a/element-timing/progressively-loaded-image.html +++ b/element-timing/progressively-loaded-image.html
@@ -23,9 +23,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + '/' + - img_src; + const pathname = window.location.origin + '/element-timing/' + img_src; // Since the image is only fully loaded after the sleep, the render timestamp // must be greater than |beforeRender| + |sleep|. checkElement(entry, pathname, 'my_image', '', beforeRender + sleep, img); diff --git a/element-timing/rectangular-image.html b/element-timing/rectangular-image.html index 0b44c4f..0c09911 100644 --- a/element-timing/rectangular-image.html +++ b/element-timing/rectangular-image.html
@@ -21,10 +21,7 @@ t.step_func_done(function(entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - // Subtracting 14 to remove 'element-timing'. - const pathname = window.location.href.substring(0, index - 14) + - 'images/black-rectangle.png'; + const pathname = window.location.origin + '/images/black-rectangle.png'; checkElement(entry, pathname, 'my_image', 'rectangle', beforeRender, img); // Assume viewport has size at least 100, so the element is fully visible. checkRect(entry, [20, 120, 20, 70]);